<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="utf-8">
    <title>Apricot 1.3</title>
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta name="description" content="">
    <meta name="author" content="">
    <!-- Le styles -->
    <script type="text/javascript" src="assets/js/jquery.min.js"></script>

    <link rel="stylesheet" href="assets/css/style.css">
    <link rel="stylesheet" href="assets/css/loader-style.css">
    <link rel="stylesheet" href="assets/css/bootstrap.css">
    <!-- 高德地图 Api -->
    <link rel="stylesheet" href="http://cache.amap.com/lbs/static/main1119.css"/>

    <script type="text/javascript" src="http://webapi.amap.com/maps?v=1.3&key=29464802318093abe446439f09cefb4c&plugin=AMap.Autocomplete,AMap.PlaceSearch"></script>

    <script type="text/javascript" src="http://cache.amap.com/lbs/static/addToolbar.js"></script>


    <style>
        .info-tip {
            position: absolute;
            top: 9%;
            right: 0.001%;
            font-size: 12px;
            background-color: #365279;
            height: 60%;
            width: 13%;
            opacity: 0.9;
            text-align: left;
            color: #FFFFFF;
            display: none;
        }
        .info-tip h3{
            text-align: center;
            font-family: "微软雅黑";
        }
        .info-tip-inline{
            display: inline-block;

        }
        .info-tip-input{
            background: #365279;
            display: inline-block;
            width:55%;
            border: 1px;

        }
        .info-tip p {
            font-weight: 600;
        }


        .map-list{
            padding: 6%;
        }
        .info {
            border: solid 1px silver;
        }
        div.info-top {
            position: relative;
            background: none repeat scroll 0 0 #F9F9F9;
            border-bottom: 1px solid #CCC;
            border-radius: 5px 5px 0 0;
        }
        div.info-top div {
            display: inline-block;
            color: #333333;
            font-size: 14px;
            font-weight: bold;
            line-height: 31px;
            padding: 0 10px;
        }
        div.info-top img {
            position: absolute;
            top: 10px;
            right: 10px;
            transition-duration: 0.25s;
        }
        div.info-top img:hover {
            box-shadow: 0px 0px 5px #000;
        }
        div.info-middle {
            font-size: 12px;
            padding: 6px;
            line-height: 20px;
        }
        div.info-bottom {
            height: 0px;
            width: 100%;
            clear: both;
            text-align: center;
        }
        div.info-bottom img {
            position: relative;
            z-index: 104;
        }
        span {
            margin-left: 5px;
            font-size: 11px;
        }
        .info-middle img {
            float: left;
            margin-right: 6px;
        }

    </style>






    <!-- HTML5 shim, for IE6-8 support of HTML5 elements -->
    <!--[if lt IE 9]>
        <script src="http://html5shim.googlecode.com/svn/trunk/html5.js"></script>
        <![endif]-->
    <!-- Fav and touch icons -->
    <link rel="shortcut icon" href="assets/ico/minus.png">
</head>

<body>
<!-- Preloader -->
<div id="preloader">
    <div id="status">&nbsp;</div>
</div>
<!-- TOP NAVBAR -->
<nav role="navigation" class="navbar navbar-static-top">
    <div class="container-fluid">



        <!-- Collect the nav links, forms, and other content for toggling -->
        <div id="bs-example-navbar-collapse-1" class="collapse navbar-collapse">


            <ul style="margin-right:0;" class="nav navbar-nav navbar-right">
                <li>
                    <a data-toggle="dropdown" class="dropdown-toggle" href="#">
                        <img alt="" class="admin-pic img-circle" src="assets/img/head.JPG">Hi, Zhiyu <b class="caret"></b>
                    </a>
                    <ul style="margin-top:14px;" role="menu" class="dropdown-setting dropdown-menu">
                        <li>
                            <a href="#">
                                <span class="entypo-user"></span>&#160;&#160;My Profile</a>
                        </li>
                        <li>
                            <a href="#">
                                <span class="entypo-vcard"></span>&#160;&#160;Account Setting</a>
                        </li>
                        <li>
                            <a href="#">
                                <span class="entypo-lifebuoy"></span>&#160;&#160;Help</a>
                        </li>
                        <li class="divider"></li>
                        <li>
                            <a href="http://themeforest.net/item/apricot-navigation-admin-dashboard-template/7664475?WT.ac=category_item&WT.z_author=themesmile">
                                <span class="entypo-basket"></span>&#160;&#160; Purchase</a>
                        </li>
                    </ul>
                </li>
                <li>

                    <ul role="menu" class="dropdown-setting dropdown-menu">

                        <li class="theme-bg">
                            <div id="button-bg"></div>
                            <div id="button-bg2"></div>
                            <div id="button-bg3"></div>
                            <div id="button-bg5"></div>
                            <div id="button-bg6"></div>
                            <div id="button-bg7"></div>
                            <div id="button-bg8"></div>
                            <div id="button-bg9"></div>
                            <div id="button-bg10"></div>
                            <div id="button-bg11"></div>
                            <div id="button-bg12"></div>
                            <div id="button-bg13"></div>
                        </li>
                    </ul>
                </li>
                <li class="hidden-xs">
                    <a class="toggle-left" href="#">
                        <span style="font-size:20px;" class="entypo-list-add"></span>
                    </a>
                </li>
            </ul>

        </div>
        <!-- /.navbar-collapse -->
    </div>
    <!-- /.container-fluid -->
</nav>

<!-- /END OF TOP NAVBAR -->

<!-- SIDE MENU -->
<!-- SIDE MENU -->
<div id="skin-select">
    <div id="logo">
        <h1>YoRoad<span style="margin-left:10%">v1.0</span></h1>
    </div>

    <a id="toggle">
        <span class="entypo-menu"></span>
    </a>
    <div class="dark">
        <form action="#">
                <span>
                    <input type="text" name="search" value="" class="search rounded id_search" placeholder="Search Menu..." autofocus="">
                </span>
        </form>
    </div>

    <div class="search-hover">
        <form id="demo-2">
            <input type="search" placeholder="Search Menu..." class="id_search">
        </form>
    </div>




    <div class="skin-part">
        <div id="tree-wrap">
            <div class="side-bar">
                <ul class="topnav menu-left-nest">
                    <li>
                        <a href="#" style="border-left:0px solid!important;" class="title-menu-left">

                            <span>&nbsp;App&nbsp;&nbsp;管理&nbsp;</span>
                            <i data-toggle="tooltip" class="entypo-cog pull-right config-wrap"></i>

                        </a>
                    </li>

                    <li>
                        <a class="tooltip-tip ajax-load" href="#" title="Blog App">
                            <i class="icon-document-edit"></i>
                            <span>司机管理</span>

                        </a>
                        <ul>
                            <li>
                                <a class="tooltip-tip2 ajax-load" href="blog-list.html" title="Blog List"><i class="entypo-doc-text"></i><span>司机信息查看</span></a>
                            </li>
                            <li>
                                <a class="tooltip-tip2 ajax-load" href="blog-detail.html" title="Blog Detail"><i class="entypo-newspaper"></i><span>司机审核</span></a>
                            </li>
                        </ul>
                    </li>
                    <li>
                        <a class="tooltip-tip ajax-load" href="social.html" title="Social">
                            <i class="icon-feed"></i>
                            <span>乘客管理</span>

                        </a>
                    </li>
                    <li>
                        <a class="tooltip-tip ajax-load" href="media.html" title="Media">
                            <i class="icon-camera"></i>
                            <span>订单管理</span>

                        </a>
                    </li>
                </ul>

                <ul class="topnav menu-left-nest">
                    <li>
                        <a href="#" style="border-left:0px solid!important;" class="title-menu-left">

                            <span>&nbsp;后台运维&nbsp;</span>
                            <i data-toggle="tooltip" class="entypo-cog pull-right config-wrap"></i>

                        </a>
                    </li>

                    <li>
                        <a class="tooltip-tip ajax-load" href="index.html" title="Dashboard">
                            <i class="icon-window"></i>
                            <span>实时分布</span>

                        </a>
                    </li>


                    <li>
                        <a class="tooltip-tip ajax-load" href="map.html" title="Icons">
                            <i class="icon-preview"></i>
                            <span>系统派车</span>

                        </a>
                    </li>



                    <li>
                        <a class="tooltip-tip " href="trail.html" title="轨迹查询">
                            <i class="icon-download"></i>
                            <span>查询轨迹</span>
                        </a>
                    </li>
                    <li>
                        <a class="tooltip-tip ajax-load" href="mail.html" title="Mail">
                            <i class="icon-mail"></i>
                            <span>投诉建议</span>
                            <div class="noft-purple">3</div>
                        </a>
                    </li>

                </ul>

                <ul id="menu-showhide" class="topnav menu-left-nest">
                    <li>
                        <a href="#" style="border-left:0px solid!important;" class="title-menu-left">

                            <span>数据挖掘</span>
                            <i data-toggle="tooltip" class="entypo-cog pull-right config-wrap"></i>

                        </a>
                    </li>
                    <li>
                        <a class="tooltip-tip" href="#" title="UI Element">
                            <i class="icon-monitor"></i>
                            <span>用户分析</span>
                        </a>

                    </li>
                    <li>
                        <a class="tooltip-tip" href="#" title="Form">
                            <i class="icon-document"></i>
                            <span>订单分析</span>
                        </a>

                    </li>
                    <li>
                        <a class="tooltip-tip" href="#" title="Tables">
                            <i class="icon-view-thumb"></i>
                            <span>热点区域分析</span>
                        </a>

                    </li>

                    <li>
                        <a class="tooltip-tip ajax-load" href="map.html" title="Map">
                            <i class="icon-location"></i>
                            <span>各地流量分析</span>

                        </a>
                    </li>
                </ul>


                <div class="side-dash">
                    <h3>
                        <span>Device</span>
                    </h3>
                    <ul class="side-dashh-list">
                        <li>Avg. Traffic
                            <span>25k<i style="color:#44BBC1;" class="fa fa-arrow-circle-up"></i>
                                </span>
                        </li>
                        <li>Visitors
                            <span>80%<i style="color:#AB6DB0;" class="fa fa-arrow-circle-down"></i>
                                </span>
                        </li>
                        <li>Convertion Rate
                            <span>13m<i style="color:#19A1F9;" class="fa fa-arrow-circle-up"></i>
                                </span>
                        </li>
                    </ul>
                    <h3>
                        <span>Traffic</span>
                    </h3>
                    <ul class="side-bar-list">
                        <li>Avg. Traffic
                            <div class="linebar">5,7,8,9,3,5,3,8,5</div>
                        </li>
                        <li>Visitors
                            <div class="linebar2">9,7,8,9,5,9,6,8,7</div>
                        </li>
                        <li>Convertion Rate
                            <div class="linebar3">5,7,8,9,3,5,3,8,5</div>
                        </li>
                    </ul>
                    <h3>
                        <span>Visitors</span>
                    </h3>
                    <div id="g1" style="height:180px" class="gauge"></div>
                </div>
            </div>
        </div>
    </div>
</div>
<!-- END OF SIDE MENU -->



    <!--  PAPER WRAP -->
    <div class="wrap-fluid">
        <div class="container-fluid paper-wrap bevel tlbr">





            <!-- CONTENT -->
            <!--TITLE -->
            <div class="row">
                <div id="paper-top">
                    <div class="col-sm-3">
                        <h2 class="tittle-content-header">
                            <i class="icon-location"></i> 
                            <span style="font-size: 0.8em">地图运维
                            </span>
                        </h2>

                    </div>
                </div>
            </div>
            <!--/ TITLE -->

            <!-- BREADCRUMB -->
            <ul id="breadcrumb">
                <li>
                    <span class="entypo-home"></span>
                </li>
                <li><i class="fa fa-lg fa-angle-right"></i>
                </li>
                <li><a href="#" title="Sample page 1">首页</a>
                </li>
                <li><i class="fa fa-lg fa-angle-right"></i>
                </li>
                <li><a href="#" title="Sample page 1">轨迹查看</a>
                </li>
                <li class="pull-right">
                    <div class="input-group input-widget">

                        <input style="border-radius:15px" type="text" placeholder="Search..." class="form-control">
                    </div>
                </li>
            </ul>

            <!-- END OF BREADCRUMB -->





            <div class="content-wrap">
                <div class="row">


                    <div class="col-sm-12">
                        <div class="nest" id="basicClose">
                            <div class="title-alt">
                                <h6>查询客户</h6>

                            </div>

                            <div class="body-nest" id="basic">
                                <div class="form_center">
                                    <div class="myPageTop">
                                        <tr>
                                            <td>
                                                <label>请输入关键字：</label>
                                            </td>
                                        </tr>
                                        <tr>
                                            <td>
                                                <input id="tipinput"/>
                                            </td>
                                        </tr>
                                    </div>
                                </div>


                            </div>

                        </div>
                    </div>

                </div>
            </div>


            <div class="content-wrap">
                <div class="row">


                    <div class="col-sm-12">
                        <div class="nest" id="GmapClose">
                            <div class="title-alt">
                                <h6>
                                    系统派车</h6>
                                <div class="titleClose">
                                    <a class="gone" href="#GmapClose">
                                        <span class="entypo-cancel"></span>
                                    </a>
                                </div>
                                <div class="titleToggle">
                                    <a class="nav-toggle-alt" href="#Gmap">
                                        <span class="entypo-up-open"></span>
                                    </a>
                                </div>

                            </div>

                            <div style="padding:0;" class="body-nest" id="Gmap">
                                <div id="test1" class="gmap" style="width:100%;height:500px;position:relative;"></div>

                                <div class="info-tip">

                                    <h4 style="text-align: center">乘客信息录入</h4>
                                    <div class="map-list">
                                        <label class="info-tip-inline">乘客姓名：</label>
                                        <input class="info-tip-input" placeholder="输入乘客姓名" id="PassengerName"/>
                                    </div>
                                    <div class="map-list">
                                        <label class="info-tip-inline">联系方式：</label>
                                        <input class="info-tip-input" placeholder="输入联系方式" id="PassengerTel"/>
                                    </div>
                                    <div class="map-list">
                                        <label class="info-tip-inline">所在地址：</label>
                                        <p class="info-tip-inline">留和路留泗路</p>
                                    </div>
                                    <div class="map-list">
                                        <label class="info-tip-inline">周边司机：</label>
                                        <button class="btn btn-primary" onclick="NearestCar()">点击查询</button>
                                    </div>

                                </div>

                            </div>

                        </div>
                    </div>


                </div>
            </div>
        </div>
    </div>


    <!-- 确认派单框 -->
    <div class="modal fade" id="YesModal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel">
        <div class="modal-dialog">
            <div class="modal-content">
                <div class="modal-header">
                    <button type="button" class="close" data-dismiss="modal" aria-hidden="true">
                        &times;
                    </button>
                    <h4 class="modal-title">
                        <strong>操作提示</strong>
                    </h4>
                </div>
                <div class="modal-body">
                    是否确认将 浙AV506C 派给该乘客？
                </div>
                <div class="modal-footer">
                    <button type="button" class="btn btn-default" data-dismiss="modal" onclick="yestoadmin()">确认</button>
                    <button type="button" class="btn btn-default" data-dismiss="modal">取消</button>
                </div>
            </div>
            <!-- /.modal-content -->
        </div>
        <!-- /.modal -->
    </div>


    <!--  END OF PAPER WRAP -->
    <!--  zhiyu Do Page -->





    <!-- MAIN EFFECT -->
    <script type="text/javascript" src="assets/js/preloader.js"></script>
    <script type="text/javascript" src="assets/js/bootstrap.js"></script>
    <script type="text/javascript" src="assets/js/app.js"></script>
    <script type="text/javascript" src="assets/js/load.js"></script>
    <script type="text/javascript" src="assets/js/main.js"></script>



    <script type="text/javascript" src="assets/js/map/gmap3.js"></script>
    <script type="text/javascript" src="assets/js/zhiyu/car.js"></script>



    <script type="text/javascript">
        function yestoadmin() {
            alert("派单成功，司机将收到乘客信息！");
            map1.clearMap();
            $(".info-tip").css("display","none");

        }



        var map1 = new AMap.Map('test1', {
            resizeEnable: true,
            city:'杭州',
            zoom: 12
        });
//        //输入提示
//        var autoOptions = {
//            input: "tipinput"
//        };
//        var auto = new AMap.Autocomplete(autoOptions);
//        var placeSearch = new AMap.PlaceSearch({
//            map: map1
//        });  //构造地点查询类
//        AMap.event.addListener(auto, "select", select);//注册监听，当选中某条记录时会触发
//        function select(e) {
//            //ClearTip();  // Hide tip
//            placeSearch.setCity(e.poi.adcode);
//            placeSearch.search(e.poi.name);  //关键字查询查询
//            //map1.clearMap();
//        }

        //输入提示
        var autoOptions = {
            input: "tipinput"
        };
        var auto = new AMap.Autocomplete(autoOptions);
        var placeSearch = new AMap.PlaceSearch({
            map: map1
        });  //构造地点查询类
        AMap.event.addListener(auto, "select", select);//注册监听，当选中某条记录时会触发
        function select(e) {
            placeSearch.setCity(e.poi.adcode);
            placeSearch.search(e.poi.name);  //关键字查询查询
            ClearTip();  // Hide tip
        }







        map1.on('click', function(e) {
            if (confirm("您确定要在此处创建乘客信息？")) {
                map1.clearMap();
                mypassenger=new AMap.Marker({
                    map: map1,
                    icon:"http://webapi.amap.com/theme/v1.3/markers/n/mark_bs.png",
                    position: [e.lnglat.getLng(), e.lnglat.getLat()],
                    offset: new AMap.Pixel(-26, -13),
                    autoRotation: true,
                });
                mypassenger.on('click', function() {
                    $(".info-tip").css("display","block");
                });


            }
            else {
                console.log("已取消");
            }



            console.log('您在[ '+e.lnglat.getLng()+','+e.lnglat.getLat()+' ]的位置点击了地图！');



        });
        function ClearTip(){
            $(".info-tip").css("display","none");
            $("#PassengerName").attr("value","");
            $("#PassengerTel").attr("value","");
        }

        function SelectByTel() {
            $(".info-tip").css("display","block");
            map1.clearMap();

            //模拟 乘客 点

            var passenger = [{
                id:1,
                icon: "http://webapi.amap.com/theme/v1.3/markers/n/mark_bs.png",
                position: [120.155105,30.270681],
                telphone: "17816873920"
            }];

            mypassenger=new AMap.Marker({
                map: map1,
                icon: passenger[0].icon,
                position: [passenger[0].position[0], passenger[0].position[1]],
                offset: new AMap.Pixel(-26, -13),
                autoRotation: true,
            });

            map1.setFitView();
            mypassenger.on('click', function() {
                alert('您点击了点');
            });
        }
        function NearestCar() {

            //模拟 司机 点
            var drivers = [{
                id:1,
                icon: "http://webapi.amap.com/images/car.png",
                position: [120.155228,30.270598],
                //lineArr:[[120.155105,30.270681],[120.158453,30.270459],[120.154891,30.278668],[120.169074,30.281577],[120.163817,30.289619],[120.168044,30.290231]]
            }, {
                id:2,
                icon: "http://webapi.amap.com/images/car.png",
                position: [120.153211,30.269393],
                //lineArr:[[120.03932,30.225342],[120.041551,30.225073],[120.053095,30.234843],[120.051937,30.242499],[120.055499,30.249729],[120.077064,30.260831],[120.091633,30.262684]]
            },{
                id:3,
                icon: "http://webapi.amap.com/images/car.png",
                position: [120.15912,30.26941],
                //lineArr:[[120.267404,30.164806],[120.266911,30.181056],[120.248242,30.182058],[120.248435,30.185675],[120.243886,30.185656]]

            },{
                id:4,
                icon: "http://webapi.amap.com/images/car.png",
                position: [120.156484,30.266136],
                //lineArr:[[120.140199,30.166669],[120.142817,30.167579],[120.141637,30.169953],[120.154726,30.173589],[120.154404,30.176075]]
            },{
                //car id
                id:5,
                icon:"http://webapi.amap.com/images/car.png",
                //起始点的经纬度
                position:[120.157192,30.272974],
                //路径通过的经纬度
                //lineArr:[[120.182287,30.148803],[120.188209,30.171586],[120.18572,30.198443],[120.172073,30.219435],[120.172073,30.238939],[120.170957,30.27282],[120.185549,30.27497]]
            }];

            //实例化信息窗体
            var title = '浙AV506C<span style="font-size:11px;color:#F00;">司机:曹师傅</span>',
                    content = [];
            content.push("地址：桃花路口与武林路交叉口7天酒店");
            content.push("联系电话：17816879044");
            content.push("状态：等待匹配中");

            content.push("操作：<button class='btn btn-default' style='line-height: 0.8;' data-toggle='modal' data-target='#YesModal'>匹配司机</button>");
            var infoWindow = new AMap.InfoWindow({
                isCustom: true,  //使用自定义窗体
                content: createInfoWindow(title, content.join("<br/>")),
                offset: new AMap.Pixel(16, -45)
            });

            //构建自定义信息窗体
            function createInfoWindow(title, content) {
                var info = document.createElement("div");
                info.className = "info";

                //可以通过下面的方式修改自定义窗体的宽高
                //info.style.width = "400px";
                // 定义顶部标题
                var top = document.createElement("div");
                var titleD = document.createElement("div");
                var closeX = document.createElement("img");
                top.className = "info-top";
                titleD.innerHTML = title;
                closeX.src = "http://webapi.amap.com/images/close2.gif";
                closeX.onclick = closeInfoWindow;

                top.appendChild(titleD);
                top.appendChild(closeX);
                info.appendChild(top);

                // 定义中部内容
                var middle = document.createElement("div");
                middle.className = "info-middle";
                middle.style.backgroundColor = 'white';
                middle.innerHTML = content;
                info.appendChild(middle);

                // 定义底部内容
                var bottom = document.createElement("div");
                bottom.className = "info-bottom";
                bottom.style.position = 'relative';
                bottom.style.top = '0px';
                bottom.style.margin = '0 auto';
                var sharp = document.createElement("img");
                sharp.src = "http://webapi.amap.com/images/sharp.png";
                bottom.appendChild(sharp);
                info.appendChild(bottom);
                return info;
            }

            //关闭信息窗体
            function closeInfoWindow() {
                map1.clearInfoWindow();
            }



            drivers.forEach(function (driver) {
                nearest=new AMap.Marker({
                    map: map1,
                    icon: driver.icon,
                    position: [driver.position[0], driver.position[1]],
                    offset: new AMap.Pixel(-26, -13),
                    autoRotation: true
                });
                //鼠标点击marker弹出自定义的信息窗体

                nearest.on('click', markerClick);


            });
            function markerClick(e) {


                infoWindow.open(map1, e.target.getPosition());
            }
            map1.setFitView();



        }




    </script>




</body>

</html>
